<template>
  <div class="publicBox" id="priceNewbuildCSS">

<el-form ref="form"  label-position="left" label-width="181px" class="demo-form-inline publicEditFrom">

<el-row>
     <div class="pubPageTagP">
               <p>订单管理/查看</p>
     </div>
</el-row>

<el-row >
    <el-form-item label="设备名称" >
      <p>{{name}}</p>
  </el-form-item>
</el-row>

<el-row>
  <el-form-item label="适用设备类型"  class="label_right">
  <p>{{typename}}</p>
  </el-form-item>
</el-row>

<el-row>
    <el-form-item label="适用设备型号" class="label_right">
  <p>{{model}}</p>
  </el-form-item>     
</el-row>

<el-row>
 <el-form-item label="适用区域" >
  <p>{{areanames}}</p>
 </el-form-item>
</el-row>

<el-row>
 <el-form-item label="价目列表" >
   <!-- this.$refs.table.getAllData() -->
   <public-table
        class="listArr" 
         :columnDefs="columnDefs" 
         :tableData="tableData"
         :order=true
         width=1100
         :btn='[]'>
</public-table>

   </el-form-item>
   
</el-row>


<el-row class="pubSubmitBtn-row">
  <el-form-item>
            <el-button class="pubBtnGree" @click="canCleFn" type="primary">返回</el-button>
  </el-form-item>
</el-row>

</el-form>
    
  </div>
</template>

<script>
import publicTable from "@/components/public/publicTable.vue"
import * as API from "@api/operate.js"
export default {
  components: {
  publicTable
  },
  data() {
    return {
    pid:'',
    columnDefs :[
            {headerName: '服务名称', field: 'serviceavailablename',width:355},
            {headerName: '原价', field: 'originalprice',width:345},
            {headerName: '优惠价', field: 'preferentialprice',width:345}
        ],
    tableData:[],
    name:'',
    typename:'',
    model:'',
    areanames:''
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {


  },
  // 监控data中的数据变化
  watch: {


 },
  methods: {
   canCleFn(){
           this.$router.go(-1)
       },
  async init(){
      this.pid = this.$route.query.data.id
      if(this.pid = this.$route.query.data.id){
        await API.getpriceSeeAPI({id:this.pid}).then(res=>{
        if(res.IsPositive){
          this.tableData = res.Data.pricingList
          this.name = res.Data.name
          this.typename = res.Data.typename
          this.areanames = res.Data.areanames
          this.model = res.Data.model
          // console.log("res",res.Data)
        }else{
          this.$message.error({message:res.ErrorCode});
        }
      })
      }

    }

  },
  async created() {
    this.init()
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.listArr{
            margin: 0;
            margin-left: 88px;
        }
        .lower_box{
          width: 1100px;
          background-color: #eeeeee;
         
          margin:1px 0;
          p{
            text-align: center;

            margin: 0 auto;
            
          } 
        }
</style>